:root {
    // contrast 反色
    // shade 阴影色
    // tint 浅色

    --transitionTime         : .35s ease; // 过渡时间
    // 主要字体色
    --color-font             : #1a1a1a;
    --color-font-rgb         : 26, 26, 26;
    --color-font-contrast    : #ffffff;
    --color-font-contrast-rgb: 255, 255, 255;
    --color-font-shade       : #171717;
    --color-font-tint        : #313131;

    // 次要信息颜色
    --color-meta             : #5c5c5c;
    --color-meta-rgb         : 92, 92, 92;
    --color-meta-contrast    : #ffffff;
    --color-meta-contrast-rgb: 255, 255, 255;
    --color-meta-shade       : #515151;
    --color-meta-tint        : #6c6c6c;

    // 主背景色
    --color-body-bg             : #ffffff;
    --color-body-bg-rgb         : 255, 255, 255;
    --color-body-bg-contrast    : #000000;
    --color-body-bg-contrast-rgb: 0, 0, 0;
    --color-body-bg-shade       : #e0e0e0;
    --color-body-bg-tint        : #ffffff;

    // 头部背景色
    --color-head-bg             : #f1f1f1;
    --color-head-bg-rgb         : 241, 241, 241;
    --color-head-bg-contrast    : #000000;
    --color-head-bg-contrast-rgb: 0, 0, 0;
    --color-head-bg-shade       : #d4d4d4;
    --color-head-bg-tint        : #f2f2f2;

    // 卡片背景色
    --color-card-bg             : #fafafa;
    --color-card-bg-rgb         : 250, 250, 250;
    --color-card-bg-contrast    : #000000;
    --color-card-bg-contrast-rgb: 0, 0, 0;
    --color-card-bg-shade       : #dcdcdc;
    --color-card-bg-tint        : #fbfbfb;

    // 动画切换遮罩色
    --color-mark-head-bg             : #eeeeee;
    --color-mark-head-bg-rgb         : 238, 238, 238;
    --color-mark-head-bg-contrast    : #000000;
    --color-mark-head-bg-contrast-rgb: 0, 0, 0;
    --color-mark-head-bg-shade       : #d1d1d1;
    --color-mark-head-bg-tint        : #f0f0f0;

    // 动画切换遮罩色
    --color-mark-head-bg             : #252525;
    --color-mark-head-bg-rgb         : 37, 37, 37;
    --color-mark-head-bg-contrast    : #ffffff;
    --color-mark-head-bg-contrast-rgb: 255, 255, 255;
    --color-mark-head-bg-shade       : #212121;
    --color-mark-head-bg-tint        : #3b3b3b;

    // 评论组建主题色
    --color-comment             : #525f7f;
    --color-comment-rgb         : 82, 95, 127;
    --color-comment-contrast    : #ffffff;
    --color-comment-contrast-rgb: 255, 255, 255;
    --color-comment-shade       : #485470;
    --color-comment-tint        : #636f8c;

    // 分割边框色
    --color-dashed             : #c5c5c5;
    --color-dashed-rgb         : 197, 197, 197;
    --color-dashed-contrast    : #000000;
    --color-dashed-contrast-rgb: 0, 0, 0;
    --color-dashed-shade       : #adadad;
    --color-dashed-tint        : #cbcbcb;

    // 文章中超链接
    --color-link             : #6062ce;
    --color-link-rgb         : 96, 98, 206;
    --color-link-contrast    : #ffffff;
    --color-link-contrast-rgb: 255, 255, 255;
    --color-link-shade       : #5456b5;
    --color-link-tint        : #7072d3;

    //  友链背景色
    --color-link-item-bg             : #fafafa;
    --color-link-item-bg-rgb         : 250, 250, 250;
    --color-link-item-bg-contrast    : #000000;
    --color-link-item-bg-contrast-rgb: 0, 0, 0;
    --color-link-item-bg-shade       : #dcdcdc;
    --color-link-item-bg-tint        : #f3f3f3;

    // 链接下划线颜色
    --color-link-decoration             : var(--color-link);
    --color-link-decoration-rgb         : var(--color-link-rgb);
    --color-link-decoration-contrast    : var(--color-link-contrast);
    --color-link-decoration-contrast-rgb: var(--color-link-contrast-rgb);
    --color-link-decoration-shade       : var(--color-link-shade);
    --color-link-decoration-tint        : var(--color-link-tint);

    // 加载进度条颜色
    --color-ng-bar-bg             : #5873ca;
    --color-ng-bar-bg-rgb         : 88, 115, 202;
    --color-ng-bar-bg-contrast    : #ffffff;
    --color-ng-bar-bg-contrast-rgb: 255, 255, 255;
    --color-ng-bar-bg-shade       : #4d65b2;
    --color-ng-bar-bg-tint        : #6981cf;

    // 目录背景色
    --color-toc-bg             : #eeeeee;
    --color-toc-bg-rgb         : 238, 238, 238;
    --color-toc-bg-contrast    : #000000;
    --color-toc-bg-contrast-rgb: 0, 0, 0;
    --color-toc-bg-shade       : #d1d1d1;
    --color-toc-bg-tint        : #f0f0f0;


    &.dark {
        --color-font             : #dddddd;
        --color-font-rgb         : 221, 221, 221;
        --color-font-contrast    : #000000;
        --color-font-contrast-rgb: 0, 0, 0;
        --color-font-shade       : #c2c2c2;
        --color-font-tint        : #e0e0e0;

        --color-meta             : #e6e6e6;
        --color-meta-rgb         : 230, 230, 230;
        --color-meta-contrast    : #000000;
        --color-meta-contrast-rgb: 0, 0, 0;
        --color-meta-shade       : #cacaca;
        --color-meta-tint        : #e9e9e9;

        --color-body-bg             : #252525;
        --color-body-bg-rgb         : 37, 37, 37;
        --color-body-bg-contrast    : #ffffff;
        --color-body-bg-contrast-rgb: 255, 255, 255;
        --color-body-bg-shade       : #212121;
        --color-body-bg-tint        : #3b3b3b;

        --color-head-bg             : #1d1d1d;
        --color-head-bg-rgb         : 29, 29, 29;
        --color-head-bg-contrast    : #ffffff;
        --color-head-bg-contrast-rgb: 255, 255, 255;
        --color-head-bg-shade       : #1a1a1a;
        --color-head-bg-tint        : #343434;

        --color-card-bg             : #222222;
        --color-card-bg-rgb         : 34, 34, 34;
        --color-card-bg-contrast    : #ffffff;
        --color-card-bg-contrast-rgb: 255, 255, 255;
        --color-card-bg-shade       : #1e1e1e;
        --color-card-bg-tint        : #383838;

        --color-mark-head-bg             : #353535;
        --color-mark-head-bg-rgb         : 53, 53, 53;
        --color-mark-head-bg-contrast    : #ffffff;
        --color-mark-head-bg-contrast-rgb: 255, 255, 255;
        --color-mark-head-bg-shade       : #2f2f2f;
        --color-mark-head-bg-tint        : #494949;

        --color-mark-head-bg             : #f2f3f0;
        --color-mark-head-bg-rgb         : 242, 243, 240;
        --color-mark-head-bg-contrast    : #000000;
        --color-mark-head-bg-contrast-rgb: 0, 0, 0;
        --color-mark-head-bg-shade       : #d5d6d3;
        --color-mark-head-bg-tint        : #f3f4f2;

        --color-comment             : #8b8b8b;
        --color-comment-rgb         : 139, 139, 139;
        --color-comment-contrast    : #000000;
        --color-comment-contrast-rgb: 0, 0, 0;
        --color-comment-shade       : #7a7a7a;
        --color-comment-tint        : #979797;

        --color-link-item-bg             : #353535;
        --color-link-item-bg-rgb         : 53, 53, 53;
        --color-link-item-bg-contrast    : #ffffff;
        --color-link-item-bg-contrast-rgb: 255, 255, 255;
        --color-link-item-bg-shade       : #2f2f2f;
        --color-link-item-bg-tint        : #494949;

        --color-link             : #e4e4e4;
        --color-link-rgb         : 228, 228, 228;
        --color-link-contrast    : #000000;
        --color-link-contrast-rgb: 0, 0, 0;
        --color-link-shade       : #c9c9c9;
        --color-link-tint        : #e7e7e7;

        --color-link-decoration             : #a7a7a7;
        --color-link-decoration-rgb         : 167, 167, 167;
        --color-link-decoration-contrast    : #000000;
        --color-link-decoration-contrast-rgb: 0, 0, 0;
        --color-link-decoration-shade       : #939393;
        --color-link-decoration-tint        : #b0b0b0;


        --color-ng-bar-bg             : #fff3e5;
        --color-ng-bar-bg-rgb         : 255, 243, 229;
        --color-ng-bar-bg-contrast    : #000000;
        --color-ng-bar-bg-contrast-rgb: 0, 0, 0;
        --color-ng-bar-bg-shade       : #e0d6ca;
        --color-ng-bar-bg-tint        : #fff4e8;


        --color-toc-bg             : #6a6a6a;
        --color-toc-bg-rgb         : 106, 106, 106;
        --color-toc-bg-contrast    : #ffffff;
        --color-toc-bg-contrast-rgb: 255, 255, 255;
        --color-toc-bg-shade       : #5d5d5d;
        --color-toc-bg-tint        : #797979;
    }

    // 评论插件
    --ui-transition-duration : .35s ease;
}

:root.dark {
    --ui-bg                      : #1d1d1d;
    --ui-bg-weak                 : #252525;
    --ui-aide-bg                 : #111111;
    // 文本
    --ui-text                    : #dddddd; // 正文文本
    --ui-text-weak               : #b4b4b4; // 弱化的正文信息（手风琴子项，表头）
    --ui-aide-text               : #979797; // 辅助文本、帮助信息（面包屑）
    --ui-text-inversion          : #3d3d3d; // 文本反转色
    --ui-aide-text-stress        : #b4b4b4; // 辅助文本、帮助信息里的强调色
    // 按钮 提示
    --ui-danger                  : #ed4014; // 失败、错误、告警
    --ui-danger-weak             : #f16643;
    --ui-warning                 : #fac20a; // 警告、需注意类型提示
    --ui-warning-weak            : #fac20a;
    --ui-success                 : #32d4a1; // 成功、正确
    --ui-success-weak            : #50d4ab;
    --ui-info                    : #2d8cf0; // 通知、一般提示、执行中
    --ui-info-weak               : #57a3f3;
    // 阴影
    --ui-shadow                  : rgba(0, 0, 0, 0.2); // 阴影色
    --ui-light-shadow            : rgba(0, 0, 0, 0.1); // 弱化阴影色
    // 下拉菜单
    --ui-dropdown-menu-item      : #5e7ce0;
    --ui-dropdown-menu-item-color: #ffffff;
    // 连接
    --ui-link                    : #536eb3; // 链接文本颜色
    --ui-link-active             : #4976e9; // 链接文本悬停/激活颜色
    // 分割线
    --ui-border-line             : #2b2b2c; // 边框
    --ui-dividing-line           : #555658; // 内容分割线，用于内容之间的分割
    // 过渡
    --ui-transition-duration     : 0.3s ease;
    // 表单
    --ui-form-control-line       : #414141; // 表单控件边框色，同 边框分割线
    --ui-form-control-line-hover : #525457; // 表单控件边框悬停反馈色
    --ui-form-control-line-active: #364a8b; // 表单控件边框激活色，用于获得焦点
    // 加载动画颜色
    --ui-skeleton-background     : linear-gradient(90deg, #1d1d1d 25%, #2e2e2e 37%, #181818 63%);
}

@import url('./mixin.less');